 /**
  * Copyright (c) 2017-2019 tencent, All rights reseved.
  * @fileoverview 评星
  * @author carllsun | carllsun@tencent.com
  * @version 1.0  | 2017-11-06 | carllsun    // 初始版本。
  * 
  * @param properties {Object}
  *     starNum {String | Number}  //(非必选) 评分, 默认值0分。
  *     starName {String}          //(非必选) 当在作为表单提交时，默认值是name=score，如果你有多个地方用到了评星，
  *                                //  需要手动传入starName，否则都为默认score将会只取最后一个值                               
  *     imageStarUrl {String}      //(非必选) 点亮的icon， 默认是组件自带的，当需要替换的时候直接写images的绝对位置即可。
  *     imageNoStarUrl {String}    //(非必选) 非点亮的icon， 默认是组件自带的，当需要替换的时候直接写images的绝对位置即可。
  *                                // 点亮和非点亮同时写
  *     isSelect {Boolean}         // 参数：是否有事件，当有事件的时候可以自由评分，当没有的时候为纯展示评分。
  *
  * @param data {Object}   //均为组件内部私有data属性
  *     stars {Array}     //用于渲染评星个数。默认数组长5.
  *     animationData    // 选中时的动画数据
  *     currentIndex     // 为了只有当前选中的元素才有动画
  *
  * @slot //该插槽用于在评星组件后边增加文案。本组件不提供样式，请自行根据自己的需求来写。默认无。
  * 
  * @event _emitEvents   //对组件外暴露的事件， 统一的命名方式为 wii + 组件名  + event 如: wiiRateEvent,
  *   that.triggerEvent('wiiRateEvent', starData) 攒不支持冒泡到父级组件。
  *   页面引用需要手动绑定该事件。自行处理。回调事件命名写法同意为： 组件名 + Callback,如： bind:wiiRateEvent="rateCallback" 
  *   
  * @example    // 典型的调用示例。
     
     1.
      默认评分为0，默认的icon样式///isSelect为 false  没有事件。因为小程序直接写is-select="false"会认为是真的
     <wii-rate class="fa" is-select="{{isSelect}}">
     </wii-rate>
     
     2.
      默认评分为0，默认的icon样式，后边带有文案
     <wii-rate bind:wiiRateEvent="rateCallback" class="fa">
       <view class="wii-rate-text">我是评星组件</view>
     </wii-rate>
     
     3.
      评分为4星，默认的icon样式，name的名字是score1, 后边带有文案
     <wii-rate star-num="4"  star-name="score1"   bind:wiiRateEvent="rateCallback" class="fa">
       <view class="wii-rate-text">我是评星组件</view>
     </wii-rate>

     4.
      评分为4星，自定义的icon样式，name的名字是score1, 后边带有文案
     <wii-rate star-num="4"  star-name="score1" image-star-url="/images/xxx/xxx.png"  
      image-star-url="/images/xxx/no-xxx.png"  bind:wiiRateEvent="rateCallback" class="fa">
       <view class="wii-rate-text">呵呵呵呵</view>
     </wii-rate>
  */


Component({
  properties: {
    starNum: {
      type: String,
      value: 0
    },
    starName: {
      type: String,
      value: 'score'
    },
    imageStarUrl: {
      type: String,
      value: './images/star.png'
    },
    imageNoStarUrl: {
      type: String,
      value: './images/no-star.png'
    },
    isSelect: {
      type: Boolean,
      value: true
    }
  },
  data: {
    stars: [0,0,0,0,0],
    animationData: {},
    currentIndex: null
  },
  attached(){
    var starNum = this.data.starNum;
    var stars = this.convertToStarsArray(starNum);
    this.setData({
      stars: stars,
      starNum: starNum
    })

     this.animation = wx.createAnimation({
       duration: 1000,
       timingFunction: 'ease',
     })

       
  },
  ready(){
    this._emitEvents();
  },
  methods: {
    selectedTap: function(e){
      var that = this;
      var index = e.currentTarget.dataset.index;

      //动画:上一次点亮stars的数量
      var starsSum = 0;
      for(var i = 0; i < that.data.stars.length; i++){
        starsSum += that.data.stars[i];
      }


      var stars = that.convertToStarsArray(index);
      var starNum = index;
      

      that.setData({
        stars: stars,
        starNum: starNum
      });
      
      //动画: 当前点亮star才会有动画，已经点亮再次点击不会出现动画。
      if(starsSum < index){
         that.animation.scale(1.4).opacity(0.3).step();
         that.setData({
           animationData: that.animation.export(),
           currentIndex: index
         });

         setTimeout(function() {
           that.animation.scale(1).opacity(1).step();
           that.setData({
             animationData: that.animation.export(),
             currentIndex: index
           })
         }, 200)

        return false;
      }

    },
    convertToStarsArray: function (stars){
      if (stars == 'null'){stars = 0;}
      var num = stars.toString().substring(0, 1);
      var array = [];
      for(var i = 1; i <= 5; i++){
        if (i <= num){
          array.push(1);
        } else {
          array.push(0);
        }
      }
      return array;
    },
    _emitEvents: function(){
      var that = this;
      var starData = {stars: that.data.stars, starNum: that.data.starNum};
      that.triggerEvent('wiiRateEvent', starData);
    }
  }
})